@extends('layouts.backend')
@section('title')
    写列表
@endsection

@section('css')
    <link href="{{asset('css/plugins/select2/select2.min.css')}}" rel="stylesheet">
@endsection
@section('body')
    <div class="row">
        <div class="ibox">
            <div class="ibox-title">
                <h5 >写文章</h5>
                <a href="{{route('backend.article.index')}}" class="btn pull-right btn-primary">返回列表</a>
                <div class="clearfix"></div>
            </div>
            <div class="ibox-content">

                <div class="row m-md">
                    <form method="post" role="form" >
                        @csrf
                        <div class="form-group">
                            <label >标题@include('components.backend.required')</label>
                            <input type="text" name="title" placeholder="请输入标题" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4" id="aetherupload-wrapper">
                                    <label >封面@include('components.backend.required')</label>
                                    <div class="controls">
                                        <input type="file" id="aetherupload-resource" onchange="aetherupload(this).setGroup('file').setSavedPathField('#aetherupload-savedpath').setPreprocessRoute('/aetherupload/preprocess').setUploadingRoute('/aetherupload/uploading').setLaxMode(false).success(someCallback).upload()"/>
                                        <!--需要一个名为aetherupload-resource的id，用以标识上传的文件，setGroup(...)设置分组名，setSavedPathField(...)设置资源存储路径的保存节点，setPreprocessRoute(...)设置预处理路由，setUploadingRoute(...)设置上传分块路由，setLaxMode(...)设置宽松模式，success(...)可用于声名上传成功后的回调方法名。默认为选择文件后触发上传，也可根据需求手动更改为特定事件触发，如点击提交表单时-->
                                        <div class="progress " style="height: 6px;margin-bottom: 2px;margin-top: 10px;width: 200px;">
                                            <div id="aetherupload-progressbar" style="background:blue;height:6px;width:0;"></div><!--需要一个名为aetherupload-progressbar的id，用以标识进度条-->
                                        </div>
                                        <span style="font-size:12px;color:#aaa;" id="aetherupload-output"></span><!--需要一个名为aetherupload-output的id，用以标识提示信息-->
                                        <input type="hidden" name="page_image" id="aetherupload-savedpath"><!--需要一个自定义名称的id，以及一个自定义名称的name值, 用以标识资源储存路径自动填充位置，默认id为aetherupload-savedpath，可根据setSavedPathField(...)设置为其它任意值-->
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label >分类 @include('components.backend.required')</label>
                                    <select name="category_id"  class="form-control">
                                        @forelse($categories as $category)
                                            <option value="{{$category->id}}">{{$category->name}}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label >Tag @include('components.backend.required')</label>
                                    <select id="tag" name="tags[]"  class="form-control" multiple="multiple">
                                        @forelse($tags as $tag)
                                            <option value="{{$tag->id}}">{{$tag->tag}}</option>
                                        @empty
                                        @endforelse
                                    </select>
                                </div>

                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="submit">添加</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ URL::asset('vendor/aetherupload/js/spark-md5.min.js') }}"></script><!--（可选）需要引入spark-md5.min.js，用以支持秒传功能-->
    <script src="{{ URL::asset('vendor/aetherupload/js/aetherupload.js') }}"></script><!--需要引入aetherupload.js-->
    <script src="{{asset('js/plugins/select2/select2.full.min.js')}}"></script>
    <script>
        $(document).ready(function() {
            $('#tag').select2();
        });

        someCallback = function () {
            // Example
            $('#aetherupload-output').append(
                '<p>执行回调 - 文件已上传，原名：<span >' + this.resourceName + '</span> | 大小：<span >' + parseFloat(this.resourceSize / (1000 * 1000)).toFixed(2) + 'MB' + '</span> | 储存名：<span >' + this.savedPath.substr(this.savedPath.lastIndexOf('_') + 1) + '</span></p>'
            );
        }
    </script>
@endsection


